<template>
 <view class="context">
 	<view class="head">
 		<view class="head-left">
 			<image src="/static/vip.png"></image>
 			<view class="head-left-info">我的级别</view>
 		</view>
 		<view class="head-right">
 			<view class="person-nums">
 				<view class="head-box-left">
 					<view class="box-item">
 						<view class="num">0</view>
 						<view>直推人数</view>
 					</view>
 					<view class="box-item">
 						<view class="num">0</view>
 						<view>新增人数</view>
 					</view>
 
 				</view>
 				<view class="head-box-right">
 					<view class="box-item">
 						<view class="num">0.0000000</view>
 						<view>团队业绩</view>
 					</view>
 					<view class="box-item">
 						<view class="num">0</view>
 						<view>新增业绩</view>
 					</view>
 				</view>
 			</view>
 		</view>
 	</view>
 	<view class="box">
 		<view class="tab">
 			<w-tab :data="tabData" :customStyle="{margin:'auto 80rpx'}"></w-tab>
 		</view>
 		<view class="box-item">
 			<u-collapse hover-class="none" :head-style="{background:'#D4EAFC',padding:'20rpx'}" :item-style="{marginTop:'3rpx',borderRadius:'10rpx'}">
 				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
 					<view class="box-info">
 						<view class="box-info-item">
 							<view class="info-title">账号</view>
 							<view class="info-content">mcc_vip002@163.com</view>
 						</view>
 						<view class="box-info-item">
 							<view class="info-title">UID</view>
 							<view class="info-content">M12117723.com</view>
 						</view>
 						<view class="box-info-item">
 							<view class="info-title">算力</view>
 							<view class="info-content">300.0000USDT.com</view>
 						</view>
 						<view class="box-info-item">
 							<view class="info-title">等级</view>
 							<view class="info-content">M0</view>
 						</view>
 						<view class="box-info-item">
 							<view class="info-title">团队人数</view>
 							<view class="info-content">0人</view>
 						</view>
 						<view class="box-info-item">
 							<view class="info-title">新增人数</view>
 							<view class="info-content">0人</view>
 						</view>
 						<view class="box-info-item">
 							<view class="info-title">团队业绩</view>
 							<view class="info-content">0USDT</view>
 						</view>
 						<view class="box-info-item">
 							<view class="info-title" style="display: flex;align-items: center;">团队分布</view>
 							<view class="info-content">
 								<view>
 									<text class="tag">M0:0人</text>
 									<text class="tag">M1:0人</text>
 								</view>
 								<view>
 									<text class="tag">M2:0人</text>
 									<text class="tag">M3:0人</text>
 								</view>
 								<view>
 									<text class="tag">M4:0人</text>
 									<text class="tag">M5:0人</text>
 								</view>
 							</view>
 						</view>
 					</view>
 				</u-collapse-item>
 			</u-collapse>
 		</view>
 	</view>
 	<w-none :boo="true"></w-none>
 </view>
</template>

<script>
import indexBackgroundImage from "@/static/team_bg.png";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      indexBackgroundImage: indexBackgroundImage,
      isLoading: false,
      invitation: null,
      tabData: [{
      		name: "A组 3"
      	},
      	{
      		name: "B组 20"
      	}
      ],
      itemList: [{
      	head: "A1客户",
      	body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
      	open: true,
      	disabled: true
      }, {
      	head: "A2客户",
      	body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
      	open: false,
      }, {
      	head: "A3客户",
      	body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
      	open: false,
      }],
    };
  },
  methods: {
    ...mapActions("mf/my", ["loadTeamInfo"]),
  },
  computed: {
    ...mapGetters("mf/my", ["teamInfo"]),
  },
  async onLoad() {
    this.isLoading = true;
    await this.loadTeamInfo();
    this.isLoading = false;
  },
};
</script>

<style lang="scss" scoped>
	::v-deep .u-collapse-body{
		height: 100%;
	}
	.head {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 292rpx;
		background: #2A96EE;
		color: #fff;

		.head-left {
			image {
				width: 100rpx;
				height: 100rpx;
			}

			.head-left-info {
				margin-top: 20rpx;
			}
		}

		.head-right {}
	}

	.person-nums {
		width: 400rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		font-size: 20rpx;

		.box-item {
			margin: 40rpx auto;
		}

		.num {
			font-size: 32rpx;
		}
	}

	.tab {
		display: flex;
		justify-content: center;
		margin: 0 auto;
		padding-top: 20rpx;
	}

	.box {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		margin-top: -20rpx;
		.box-item{
			width: 702rpx;
			margin: 20rpx auto;
		}
	}

	.box-info{
		height: 100%;
		.box-info-item{
			display: flex;
			background-color: #F9FAFC;
			margin-bottom: 3rpx;
			padding: 10rpx;
			.info-title{
				width: 280rpx;
			}
			.info-content{
				.tag{
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
